<template>
  <div class="not-found-container">
    <div class="content">
      <img :src="notFoundImage" alt="404 Not Found" class="not-found-image" />
      <h1>页面不存在</h1>
      <p>抱歉，您访问的页面不存在或已被移除。</p>
      
      <!-- 调试信息区域 -->
      <div class="debug-info">
        <h3>路由调试信息</h3>
        <p>当前路径: {{ currentPath }}</p>
        <p>路由名称: {{ routeName }}</p>
        <p>路由参数: {{ JSON.stringify(routeParams) }}</p>
        <p>查询参数: {{ JSON.stringify(routeQuery) }}</p>
      </div>
      
      <el-button type="primary" @click="goToHome">返回首页</el-button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import notFoundImage from '../../assets/404.svg';

const router = useRouter();
const route = useRoute();

// 调试信息
const currentPath = computed(() => route.fullPath);
const routeName = computed(() => route.name);
const routeParams = computed(() => route.params);
const routeQuery = computed(() => route.query);

// 返回首页
const goToHome = () => {
  router.push('/');
};
</script>

<style scoped>
.not-found-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.content {
  text-align: center;
  padding: 2rem;
}

.not-found-image {
  max-width: 400px;
  margin-bottom: 2rem;
}

h1 {
  font-size: 2.5rem;
  color: #303133;
  margin-bottom: 1rem;
}

p {
  color: #606266;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.debug-info {
  background-color: #f0f9ff;
  border: 1px solid #a0cfff;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 2rem;
  text-align: left;
}

.debug-info h3 {
  color: #409eff;
  margin-top: 0;
}

.debug-info p {
  margin: 0.5rem 0;
  font-family: monospace;
  color: #333;
}
</style> 